<template>
    <div class="timing">
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
            <el-form-item label="数据模型名称">
              <el-input v-model="formInline.dataModelName" clearable placeholder="请输入数据模型名称" />
            </el-form-item>
            <el-form-item>
              <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 按钮 -->
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />创建映射模型</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <ykhttb ref="httbRef" 
      :btn-is-show="btnIsShow" 
      :table-col="tabUserList" 
      :table-data="tableUserData"
      width="180"
      @deleteSelectData="deleteSelectData"
       @refresh="getUserList" />
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  
      <el-dialog :close-on-click-modal="false" :title="title" width="50%" :visible.sync="dialogTableVisible">
        <!-- 名称和路径必输 -->
        <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm autoClass">
          <el-form-item label="模型名称" prop="dataModelName">
            <el-input v-model="ruleForm.dataModelName" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="模型类型" prop="dataModelTypeId">
            <el-select v-model="ruleForm.dataModelTypeId" clearable placeholder="请选择">
              <el-option
                v-for="(item,i) in dataModuleTypeList"
                :key="i"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!-- <el-divider></el-divider> -->
          <el-form-item label-width="0px" style="width:100%;margin-top: 20px;">
            <div style="max-height: 300px;overflow-y: scroll;">
              <div v-for="(item,index) in fields" :key="index" class="addPs">
                <div style="display: flex;">
                  <label style="display: inline-block;width: 100px;text-align: right;padding-right: 10px;"><span style="color:red;">*</span> 字段名称</label>
                  <div style="display: inline-block;flex:1;">
                    <el-input v-model="item.fieldName" clearable placeholder="" style="display: inline-block;" />
                  </div>
                </div>
                <div style="display: flex;">
                  <label style="display: inline-block;width: 100px;text-align: right;padding-right: 10px;"><span style="color:red;">*</span>中文名称</label>
                  <div style="display: inline-block;flex:1;">
                    <el-input v-model="item.fieldCnName" clearable placeholder="" style="display: inline-block;" />
                  </div>
                </div>
                <div style="display: flex;">
                  <label style="display: inline-block;width: 100px;text-align: right;padding-right: 10px;"><span style="color:red;">*</span>字段类型</label>
                  <div style="display: inline-block;flex:1;">
                    <el-select v-model="item.fieldTypeNum" @change="setValFun(item)" clearable placeholder="请选择">
                      <el-option
                        v-for="(item,i) in fieldTypeList"
                        :key="i"
                        :label="item.name"
                        :value="item.num"
                      />
                    </el-select>
                  </div>
                </div>
                <el-button v-if="index==0" type="primary" @click="addListFun"> <i style="font-size: 12px;" class="el-icon-circle-plus-outline" /> </el-button>
                <el-button v-if="index!=0" type="danger" @click="reduceListFun(index)"> <i style="font-size: 12px;" class="el-icon-remove-outline" /> </el-button>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div style="text-align: center;">
          <el-button type="primary" :disabled="isDisable" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('return')">返回</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import experiment from '@/mixins/experiment'
  import request from '@/utils/request'
  export default {
    components: {
    },
    mixins: [experiment],
    data() {
      return {
        dataModuleTypeList:[],
        btnIsShow: {
          operate: true,
          detile: false,
          del: true
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        title: '新增',
        rules: {
          dataModelName: [
              { required: true, message: '请输入模型名称', trigger: 'change' }
          ],
          dataModelTypeId: [
              { required: true, message: '请选择模型类型', trigger: 'change' }
          ]
        },
        dialogTableVisible: false,
        fields: [
            {
              "fieldCnName": "",
              "fieldName": "",
              "fieldTypeNum": '',
              "fieldType": ""
            }
          ],
        ruleForm: {
          "dataModelName": "",
          "remark": "",
          "examples": {},
          "dataModelTypeId": '',
          "dataModelTypeName": ""
        },
        userId: '',
        formInline: {
          'mappingModelName': ''
        },
        addParms: [],
        addParms2: [],
        tableUserData: [],
        tabUserList: [
          {
            key: 'dataModelName',
            title: '数据模型名称'
          },
          {
            key: 'mappingModelName',
            title: '映射模型类型'
          },
          {
            key: 'createTime',
            title: '创建时间'
          }
        ],
        fieldTypeList:[],
        total: 0,
        size: 10,
        page: 1
      }
    },
    created() {
  
    },
    mounted() {
      this.$nextTick(() => {
        this.getUserList()
      })
    },
    methods: {
      setValFun(v){
        this.fieldTypeList.forEach((item,index)=>{
          if(v.fieldTypeNum == item.num){
            v.fieldType = item.name
          }
        })
      },
      reduceListFun(i) {
        const a = JSON.parse(JSON.stringify(this.fields))
        a.splice(i, 1)
        this.fields = JSON.parse(JSON.stringify(a))
      },
      addListFun() {
        this.fields.push({
           "fieldCnName": "",
          "fieldName": "",
          "fieldTypeNum": '',
          "fieldType": ""})
      },
      deleteSelectData(v) {
        const ids = { id: v.id }
        request({
            url: '/ht-datacenter/dataModel/deleteByIds',
            method: 'post',
            data:ids
        }).then(res => {
            if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      },
      deleteParams(i) {
        const a = JSON.parse(JSON.stringify(this.addParms))
        a.splice(i, 1)
        this.addParms = JSON.parse(JSON.stringify(a))
      },
      deleteParams2(i) {
        const a = JSON.parse(JSON.stringify(this.addParms2))
        a.splice(i, 1)
        this.addParms2 = JSON.parse(JSON.stringify(a))
      },
      addParamsFun() {
        this.addParms.push({ key1: '', key2: '', key3: '' })
      },
      addParamsFun2() {
        this.addParms2.push({ key1: '', key2: '' })
      },
      handleNodeClick(data) {
        console.log(data)
      },
      resetDatav(){
        this.fields = [{
          "fieldCnName": "",
          "fieldName": "",
          "fieldTypeNum":'',
          "fieldType": ""
        }]
      },
      commitFromData() {
        let a  = JSON.parse(JSON.stringify(this.ruleForm))
          a.fields = JSON.parse(JSON.stringify(this.fields))
          a.examples = JSON.parse(JSON.stringify(this.txt))||{}
          this.dataModuleTypeList.forEach((item,index)=>{
            if(item.id==this.ruleForm.dataModelTypeId){
              a.dataModelTypeName = item.name
            }
          })
        if(!this.inspectformdat(a.fields)){//返回false监测不通过
          return
        }
        if (this.ruleForm.hasOwnProperty('id')) {
          dataModeldataupdateById(a).then(res => {
            if (res.code == 200) {
              this.getUserList()
            } else {
              this.errorDialog(res.msg)
            }
           this.resetDatav()
          })
        } else {
          dataModeldatasaveOne(a).then(res => {
            if (res.code == 200) {
              this.getUserList()
            } else {
              this.errorDialog(res.msg)
            }
            this.resetDatav()
          })
        }
      },
      handleSizeChange(v) {
        this.page = 1
        this.size = v
        this.getUserList()
      },
      handleCurrentChange(v) {
        this.page = v
        this.getUserList()
      },
  
      // 获取用户列表
      getUserList() {
        this.dialogTableVisible = false
        this.$refs.httbRef.isShowLoading(true)
        request({
            url: '/ht-datacenter/dataModel/mapping/getList',
            method: 'post',
            data:{
                'pageIndex': this.page,
                'pageSize': this.size,
                ...this.formInline
            }
        }).then(res => {
            if (res.code == 200) {
                this.tableUserData = res.data.records
                this.total = res.data.total
                this.$refs.httbRef.isShowLoading(false)
            } else {
                this.$notify.error({
                    title: '错误',
                    message: res.msg
                })
            }
        })
      }
    }
  }
  </script>
  
      <style lang="scss" scoped>
    @import "~@/assets/styles/auto.scss";
  
      >>>.jsoneditor-poweredBy {
        display: none !important;
      }
  
      .addPs{
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
        >div{
          width:32%
        }
        span{
          display: inline-block;
          width: 10%;
        }
      }
      .autoClass{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .el-form-item{
          width:50%;
        }
      }
      
      .addcs{
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
      }
      .addcs2 .el-select {
        display: inline-block;
        width: 240px;
      }
      .autoInput{
        display: inline-block;
        width: 70%;
      }
      .infoTitle{
        border-bottom:1px solid #e5e5e5;
        margin-bottom: 30px;
        position: relative;
      }
      .infoTitle>span{
        position: absolute;
        left: 20px;
        background: #fff;
        width:80px;
        top:-15px;
        height:30px;
        text-align: center;
        line-height: 30px;
      }
        .el-select{
           width:100%;
        }
        .timing{
          background:#fff;
          padding:20px;
        }
      </style>
  